<template>
  <div class="msn-page">
    <MsnHeader />
    <div class="page-content">
      <!-- 移动端导航按钮 -->
      <button class="mobile-sidebar-toggle hidden-desktop" @click="toggleMobileSidebar">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      
      <!-- 左侧边栏 -->
      <aside class="left-sidebar" :class="{ 'mobile-open': showMobileSidebar }">
        <MsnSidebar />
      </aside>
      
      <!-- 主内容区 -->
      <main class="main-content fade-in">
        <!-- 面包屑导航 -->
        <nav class="breadcrumb" aria-label="面包屑">
          <ol>
            <li><a href="#">首页</a></li>
            <li><span aria-current="page">商城首页</span></li>
          </ol>
        </nav>
        
        <!-- 轮播图 -->
        <div class="banner-carousel">
          <div class="carousel-container">
            <div class="carousel-item" v-for="(banner, index) in banners" :key="index">
              <img :src="banner.imageUrl" :alt="banner.title" class="banner-img">
              <div class="banner-text">
                <h2>{{ banner.title }}</h2>
                <p>{{ banner.subtitle }}</p>
                <button class="banner-btn">立即查看</button>
              </div>
            </div>
            <!-- 轮播指示器 -->
            <div class="carousel-indicators">
              <button v-for="(banner, index) in banners" :key="index" :class="{ 'active': activeBanner === index }" @click="goToBanner(index)"></button>
            </div>
          </div>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
          <div class="category-item" v-for="category in categories" :key="category.id">
            <img :src="category.icon" :alt="category.name" class="category-icon">
            <span>{{ category.name }}</span>
          </div>
        </div>
        
        <!-- 限时特惠 -->
        <div class="flash-sale-section">
          <div class="section-header">
            <h2 class="section-title">限时特惠</h2>
            <div class="countdown">
              <span>距结束</span>
              <div class="countdown-item">{{ hours }}</div>
              <span>:</span>
              <div class="countdown-item">{{ minutes }}</div>
              <span>:</span>
              <div class="countdown-item">{{ seconds }}</div>
            </div>
            <button class="more-btn">更多 ></button>
          </div>
          <div class="flash-sale-products">
            <ProductCard v-for="product in flashSaleProducts" :key="product.id" :product="product" />
          </div>
        </div>
        
        <!-- 推荐商品 -->
        <div class="recommended-section">
          <div class="section-header">
            <h2 class="section-title">为你推荐</h2>
            <button class="more-btn">更多 ></button>
          </div>
          <div class="product-grid">
            <ProductCard v-for="product in recommendedProducts" :key="product.id" :product="product" />
          </div>
        </div>
        
        <!-- 热卖榜单 -->
        <div class="bestseller-section">
          <div class="section-header">
            <h2 class="section-title">热卖榜单</h2>
          </div>
          <div class="bestseller-tabs">
            <button class="tab-button" :class="{ 'active': activeTab === 'all' }" @click="switchTab('all')">全部</button>
            <button class="tab-button" :class="{ 'active': activeTab === 'clothing' }" @click="switchTab('clothing')">服饰鞋包</button>
            <button class="tab-button" :class="{ 'active': activeTab === 'electronics' }" @click="switchTab('electronics')">数码家电</button>
            <button class="tab-button" :class="{ 'active': activeTab === 'home' }" @click="switchTab('home')">家居家装</button>
          </div>
          <div class="product-grid">
            <ProductCard v-for="product in bestsellerProducts" :key="product.id" :product="product" />
          </div>
        </div>
      </main>
      
      <!-- 右侧边栏 -->
      <aside class="right-sidebar hidden-mobile slide-in-right">
        <!-- 品牌特卖 -->
        <div class="brand-sale">
          <h3 class="sidebar-title">品牌特卖</h3>
          <div class="brand-logos">
            <img v-for="brand in brands" :key="brand.id" :src="brand.logo" :alt="brand.name" class="brand-logo">
          </div>
        </div>
        
        <!-- 猜你喜欢 -->
        <div class="recommendations">
          <h3 class="sidebar-title">猜你喜欢</h3>
          <div class="rec-product" v-for="product in miniRecommendations" :key="product.id">
            <img :src="product.imageUrl" :alt="product.name" class="rec-product-img">
            <div class="rec-product-info">
              <p class="rec-product-name">{{ product.name }}</p>
              <p class="rec-product-price">¥{{ product.currentPrice }}</p>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import MsnHeader from './MsnHeader.vue';
import MsnSidebar from './MsnSidebar.vue';
import ProductCard from './ProductCard.vue';

// 移动端侧边栏控制
const showMobileSidebar = ref(false);

// 轮播图数据
const banners = ref([
  {
    imageUrl: 'https://picsum.photos/id/26/1200/300',
    title: '年末大促',
    subtitle: '全场低至5折起',
  },
  {
    imageUrl: 'https://picsum.photos/id/27/1200/300',
    title: '新品首发',
    subtitle: '抢先体验新技术',
  },
  {
    imageUrl: 'https://picsum.photos/id/28/1200/300',
    title: '品牌特惠',
    subtitle: '限时抢购',
  }
]);

// 当前激活的轮播图
const activeBanner = ref(0);

// 分类导航数据
const categories = ref([
  { id: 1, name: '手机', icon: 'https://picsum.photos/id/1/50/50' },
  { id: 2, name: '电脑', icon: 'https://picsum.photos/id/2/50/50' },
  { id: 3, name: '家电', icon: 'https://picsum.photos/id/3/50/50' },
  { id: 4, name: '服装', icon: 'https://picsum.photos/id/4/50/50' },
  { id: 5, name: '鞋包', icon: 'https://picsum.photos/id/5/50/50' },
  { id: 6, name: '美妆', icon: 'https://picsum.photos/id/6/50/50' },
  { id: 7, name: '食品', icon: 'https://picsum.photos/id/7/50/50' },
  { id: 8, name: '家居', icon: 'https://picsum.photos/id/8/50/50' }
]);

// 限时特惠商品
const flashSaleProducts = ref([
  {
    id: 101,
    name: '智能手表 多功能运动监测 长续航',
    imageUrl: 'https://picsum.photos/id/11/300/300',
    currentPrice: 199.99,
    originalPrice: 399.99,
    rating: 4.8,
    reviewCount: 1256,
    sales: 5689,
    shopName: '智能数码旗舰店',
    shopIcon: 'https://picsum.photos/id/100/30/30',
    discount: '5折'
  },
  {
    id: 102,
    name: '无线蓝牙耳机 主动降噪 高音质',
    imageUrl: 'https://picsum.photos/id/12/300/300',
    currentPrice: 129.99,
    originalPrice: 249.99,
    rating: 4.7,
    reviewCount: 987,
    sales: 4321,
    shopName: '音频设备专营店',
    shopIcon: 'https://picsum.photos/id/101/30/30',
    discount: '5.2折'
  },
  {
    id: 103,
    name: '智能扫地机器人 自动充电 规划路线',
    imageUrl: 'https://picsum.photos/id/13/300/300',
    currentPrice: 899.99,
    originalPrice: 1599.99,
    rating: 4.9,
    reviewCount: 765,
    sales: 2109,
    shopName: '智能家居生活馆',
    shopIcon: 'https://picsum.photos/id/102/30/30',
    discount: '5.6折'
  },
  {
    id: 104,
    name: '男士羽绒服 保暖防风 时尚款式',
    imageUrl: 'https://picsum.photos/id/14/300/300',
    currentPrice: 299.99,
    originalPrice: 599.99,
    rating: 4.6,
    reviewCount: 890,
    sales: 3456,
    shopName: '男装精品店',
    shopIcon: 'https://picsum.photos/id/103/30/30',
    discount: '5折'
  }
]);

// 推荐商品
const recommendedProducts = ref([
  {
    id: 201,
    name: '笔记本电脑 轻薄便携 高性能处理器',
    imageUrl: 'https://picsum.photos/id/15/300/300',
    currentPrice: 4599.99,
    originalPrice: 5299.99,
    rating: 4.8,
    reviewCount: 1567,
    sales: 7890,
    shopName: '电脑科技旗舰店',
    shopIcon: 'https://picsum.photos/id/104/30/30'
  },
  {
    id: 202,
    name: '4K智能电视 超高清画质 HDR10+',
    imageUrl: 'https://picsum.photos/id/16/300/300',
    currentPrice: 2999.99,
    originalPrice: 3699.99,
    rating: 4.7,
    reviewCount: 1345,
    sales: 6789,
    shopName: '家电大卖场',
    shopIcon: 'https://picsum.photos/id/105/30/30'
  },
  {
    id: 203,
    name: '运动鞋 减震防滑 舒适透气',
    imageUrl: 'https://picsum.photos/id/17/300/300',
    currentPrice: 349.99,
    originalPrice: 459.99,
    rating: 4.9,
    reviewCount: 2134,
    sales: 12345,
    shopName: '运动品牌旗舰店',
    shopIcon: 'https://picsum.photos/id/106/30/30'
  },
  {
    id: 204,
    name: '护肤套装 保湿补水 温和不刺激',
    imageUrl: 'https://picsum.photos/id/18/300/300',
    currentPrice: 499.99,
    originalPrice: 699.99,
    rating: 4.8,
    reviewCount: 1876,
    sales: 8901,
    shopName: '美妆精品店',
    shopIcon: 'https://picsum.photos/id/107/30/30'
  },
  {
    id: 205,
    name: '厨房料理机 多功能榨汁 绞肉',
    imageUrl: 'https://picsum.photos/id/19/300/300',
    currentPrice: 299.99,
    originalPrice: 399.99,
    rating: 4.6,
    reviewCount: 987,
    sales: 5678,
    shopName: '厨房电器专营店',
    shopIcon: 'https://picsum.photos/id/108/30/30'
  },
  {
    id: 206,
    name: '时尚连衣裙 优雅气质 修身显瘦',
    imageUrl: 'https://picsum.photos/id/20/300/300',
    currentPrice: 199.99,
    originalPrice: 299.99,
    rating: 4.7,
    reviewCount: 1234,
    sales: 7890,
    shopName: '女装时尚店',
    shopIcon: 'https://picsum.photos/id/109/30/30'
  },
  {
    id: 207,
    name: '儿童玩具 益智早教 安全环保',
    imageUrl: 'https://picsum.photos/id/21/300/300',
    currentPrice: 129.99,
    originalPrice: 199.99,
    rating: 4.9,
    reviewCount: 1567,
    sales: 9876,
    shopName: '儿童用品旗舰店',
    shopIcon: 'https://picsum.photos/id/110/30/30'
  },
  {
    id: 208,
    name: '户外露营帐篷 防风防雨 易搭建',
    imageUrl: 'https://picsum.photos/id/22/300/300',
    currentPrice: 599.99,
    originalPrice: 799.99,
    rating: 4.8,
    reviewCount: 876,
    sales: 4321,
    shopName: '户外装备专营店',
    shopIcon: 'https://picsum.photos/id/111/30/30'
  }
]);

// 热卖榜单
const bestsellerProducts = ref([
  {
    id: 301,
    name: '智能手机 高清拍照 大电池',
    imageUrl: 'https://picsum.photos/id/23/300/300',
    currentPrice: 2799.99,
    originalPrice: 3299.99,
    rating: 4.9,
    reviewCount: 5678,
    sales: 34567,
    shopName: '手机品牌旗舰店',
    shopIcon: 'https://picsum.photos/id/112/30/30'
  },
  {
    id: 302,
    name: '空气净化器 除甲醛 PM2.5',
    imageUrl: 'https://picsum.photos/id/24/300/300',
    currentPrice: 1499.99,
    originalPrice: 1999.99,
    rating: 4.8,
    reviewCount: 2345,
    sales: 18765,
    shopName: '健康家电旗舰店',
    shopIcon: 'https://picsum.photos/id/113/30/30'
  },
  {
    id: 303,
    name: '智能手环 心率监测 防水运动',
    imageUrl: 'https://picsum.photos/id/25/300/300',
    currentPrice: 129.99,
    originalPrice: 199.99,
    rating: 4.7,
    reviewCount: 4567,
    sales: 56789,
    shopName: '智能穿戴专营店',
    shopIcon: 'https://picsum.photos/id/114/30/30'
  },
  {
    id: 304,
    name: '保暖内衣套装 舒适透气 弹性好',
    imageUrl: 'https://picsum.photos/id/29/300/300',
    currentPrice: 89.99,
    originalPrice: 159.99,
    rating: 4.9,
    reviewCount: 6789,
    sales: 89012,
    shopName: '内衣家居服旗舰店',
    shopIcon: 'https://picsum.photos/id/115/30/30'
  }
]);

// 品牌列表
const brands = ref([
  { id: 1, name: '品牌1', logo: 'https://picsum.photos/id/30/80/40' },
  { id: 2, name: '品牌2', logo: 'https://picsum.photos/id/31/80/40' },
  { id: 3, name: '品牌3', logo: 'https://picsum.photos/id/32/80/40' },
  { id: 4, name: '品牌4', logo: 'https://picsum.photos/id/33/80/40' },
  { id: 5, name: '品牌5', logo: 'https://picsum.photos/id/34/80/40' },
  { id: 6, name: '品牌6', logo: 'https://picsum.photos/id/35/80/40' },
  { id: 7, name: '品牌7', logo: 'https://picsum.photos/id/36/80/40' },
  { id: 8, name: '品牌8', logo: 'https://picsum.photos/id/37/80/40' }
]);

// 侧边栏迷你推荐
const miniRecommendations = ref([
  {
    id: 401,
    name: '便携充电宝 大容量 快充',
    imageUrl: 'https://picsum.photos/id/38/100/100',
    currentPrice: 69.99
  },
  {
    id: 402,
    name: '无线充电器 15W快充 多兼容',
    imageUrl: 'https://picsum.photos/id/39/100/100',
    currentPrice: 89.99
  },
  {
    id: 403,
    name: '蓝牙耳机 高音质 长续航',
    imageUrl: 'https://picsum.photos/id/40/100/100',
    currentPrice: 99.99
  },
  {
    id: 404,
    name: '笔记本支架 散热 可调节',
    imageUrl: 'https://picsum.photos/id/41/100/100',
    currentPrice: 49.99
  }
]);

// 当前活动的标签页
const activeTab = ref('all');

// 倒计时状态
const hours = ref('06');
const minutes = ref('45');
const seconds = ref('32');

// 轮播图计时器
let carouselTimer = null;
// 倒计时计时器
let countdownTimer = null;

// 切换移动端侧边栏
const toggleMobileSidebar = () => {
  showMobileSidebar.value = !showMobileSidebar.value;
};

// 切换到指定轮播图
const goToBanner = (index) => {
  activeBanner.value = index;
};

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 组件挂载时执行
onMounted(() => {
  // 启动轮播图自动播放
  startCarousel();
  // 启动倒计时
  startCountdown();
});

// 组件卸载时清理
onUnmounted(() => {
  if (carouselTimer) {
    clearInterval(carouselTimer);
  }
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});

// 启动轮播图自动播放
const startCarousel = () => {
  carouselTimer = setInterval(() => {
    activeBanner.value = (activeBanner.value + 1) % banners.value.length;
  }, 5000);
};

// 启动倒计时
const startCountdown = () => {
  countdownTimer = setInterval(() => {
    let sec = parseInt(seconds.value);
    let min = parseInt(minutes.value);
    let hr = parseInt(hours.value);
    
    sec--;
    if (sec < 0) {
      sec = 59;
      min--;
      if (min < 0) {
        min = 59;
        hr--;
        if (hr < 0) {
          // 倒计时结束，重置时间
          hr = 6;
          min = 45;
          sec = 32;
        }
      }
    }
    
    // 更新显示
    hours.value = hr.toString().padStart(2, '0');
    minutes.value = min.toString().padStart(2, '0');
    seconds.value = sec.toString().padStart(2, '0');
  }, 1000);
};
</script>

<style scoped>
.msn-page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--background-color);
}

/* 移动端侧边栏切换按钮 */
.mobile-sidebar-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.mobile-sidebar-toggle:hover {
  background: var(--border-light);
}

/* 页面内容布局 */
.page-content {
  display: flex;
  gap: 24px;
  width: 100%;
  padding: 24px;
  position: relative;
}

/* 左侧边栏 */
.left-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  height: fit-content;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--border-light);
  transition: transform var(--transition-normal);
}

/* 移动端侧边栏 */
@media (max-width: 768px) {
  .left-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    background: var(--card-background);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    margin-top: 0;
    border-radius: 0;
  }
  
  .left-sidebar.mobile-open {
    transform: translateX(260px);
  }
}

/* 主内容区 */
.main-content {
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

/* 面包屑导航 */
.breadcrumb {
  margin-bottom: 16px;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.breadcrumb li + li::before {
  content: ">";
  color: var(--text-muted);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--text-secondary);
  font-size: 14px;
}

.breadcrumb a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

/* 轮播图样式 */
.banner-carousel {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
  box-shadow: var(--shadow-md);
}

.carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item:nth-child(1) {
  opacity: 1;
}

.carousel-item:nth-child(1):nth-last-child(1),
.carousel-item:nth-child(1):nth-last-child(1) ~ .carousel-item,
.carousel-item:nth-child(2):nth-last-child(2),
.carousel-item:nth-child(2):nth-last-child(2) ~ .carousel-item:nth-child(1),
.carousel-item:nth-child(3):nth-last-child(3),
.carousel-item:nth-child(3):nth-last-child(3) ~ .carousel-item:nth-child(1),
.carousel-item:nth-child(3):nth-last-child(3) ~ .carousel-item:nth-child(2) {
  opacity: 0;
}

.carousel-item:nth-child(1):nth-last-child(1):nth-child(1),
.carousel-item:nth-child(2):nth-last-child(2):nth-child(2),
.carousel-item:nth-child(3):nth-last-child(3):nth-child(3) {
  opacity: 1;
}

.carousel-item:nth-child(1)[v-if="activeBanner === 0"],
.carousel-item:nth-child(2)[v-if="activeBanner === 1"],
.carousel-item:nth-child(3)[v-if="activeBanner === 2"] {
  opacity: 1;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.banner-text h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.banner-text p {
  font-size: 16px;
  margin-bottom: 16px;
  opacity: 0.9;
}

.banner-btn {
  background-color: #e1251b;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.banner-btn:hover {
  background-color: #c11f17;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-indicators button.active {
  background-color: white;
  width: 30px;
  border-radius: 6px;
}

/* 分类导航样式 */
.category-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 24px;
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.category-item:hover {
  transform: translateY(-4px);
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 8px;
  background-color: #f8f8f8;
  padding: 8px;
}

.category-item span {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 区域头部样式 */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/* 限时特惠样式 */
.flash-sale-section {
  margin-bottom: 32px;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.countdown-item {
  background-color: #e1251b;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.more-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.more-btn:hover {
  color: var(--primary-color);
}

.flash-sale-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 推荐商品样式 */
.recommended-section {
  margin-bottom: 32px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 热卖榜单样式 */
.bestseller-section {
  margin-bottom: 32px;
}

.bestseller-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.tab-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s;
}

.tab-button:hover {
  color: var(--primary-color);
}

.tab-button.active {
  color: var(--primary-color);
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary-color);
}

/* 右侧边栏样式 */
.right-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  height: fit-content;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--border-light);
}

/* 品牌特卖样式 */
.brand-sale {
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 24px;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.brand-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.brand-logo {
  width: 100%;
  height: 60px;
  object-fit: contain;
  background-color: white;
  border-radius: var(--radius-md);
  padding: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.brand-logo:hover {
  transform: scale(1.05);
}

/* 猜你喜欢样式 */
.recommendations {
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.rec-product {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}

.rec-product:hover {
  transform: translateX(4px);
}

.rec-product:last-child {
  margin-bottom: 0;
}

.rec-product-img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: contain;
  background-color: white;
}

.rec-product-info {
  flex: 1;
  min-width: 0;
}

.rec-product-name {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rec-product-price {
  font-size: 16px;
  font-weight: 700;
  color: #e1251b;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    gap: 20px;
    padding: 20px;
  }
  
  .left-sidebar {
    width: 240px;
  }
  
  .right-sidebar {
    width: 280px;
  }
  
  .banner-text h2 {
    font-size: 28px;
  }
  
  .flash-sale-products,
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .right-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-content {
    gap: 16px;
    padding: 16px;
  }
  
  .banner-carousel {
    height: 200px;
  }
  
  .banner-text {
    padding: 20px;
  }
  
  .banner-text h2 {
    font-size: 20px;
  }
  
  .banner-text p {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .banner-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .category-nav {
    padding: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .category-item {
    flex-shrink: 0;
    margin-right: 24px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .flash-sale-products,
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .bestseller-tabs {
    gap: 12px;
  }
  
  .tab-button {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: 12px;
  }
  
  .banner-carousel {
    height: 160px;
  }
  
  .banner-text {
    padding: 16px;
  }
  
  .banner-text h2 {
    font-size: 18px;
  }
  
  .flash-sale-products,
  .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .section-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .countdown {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

.left-sidebar {
  width: 220px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.right-sidebar {
  width: 300px;
  flex-shrink: 0;
}

@media (max-width: 1200px) {
  .page-content {
    flex-wrap: wrap;
  }
  
  .left-sidebar {
    width: 100%;
    order: 3;
  }
  
  .right-sidebar {
    width: 100%;
    order: 2;
  }
  
  .main-content {
    order: 1;
  }
}
</style>